<template>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
    import * as echarts from 'echarts';
    import resize from './mixins/resize'

    export default {
         mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            id: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '200px'
            },
            cData: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                chart: null,
                data: null,
                timer: null
            }
        },
        mounted() {
            this.initChart(this.cData);
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null;
            this.data = null;
            clearInterval(this.timer);
        },
        methods: {
            initChart(e) {
                this.chart = echarts.init(document.getElementById(this.id));
                let dataAxis = e.cLabel;
                let data = e.cData;
                let yMax = 500;
                let dataShadow = [];
                let moreSeries = [];
                let legends = [];
                for (var i = 0; i < data.length; i++) {
                    dataShadow.push(yMax);
                    legends.push(data[i].name);
                    let iii = {
                      name: data[i].name,
                      type: data[i].type,
                      barWidth: data[i].lineWidth || 50,
                      showBackground: false,
                      emphasis: {
                        focus: 'series'
                      },
                      label: {
                        normal: {
                          show: false,
                          position: "top",
                          textStyle: {
                            color: "#000",
                            fontSize: 14
                          }
                        }
                      },
                      itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                              offset: 0,
                              color: data[i].color
                            },
                              {
                                offset: 0.5,
                                color: data[i].color
                              },
                              {
                                offset: 1,
                                color: data[i].color
                              }
                            ]
                        )
                      },
                      data: data[i].data,
                    };
                    if(data[i].yAxisIndex != null){
                      iii['yAxisIndex'] = data[i].yAxisIndex
                    };
                    if(data[i].stack != null){
                      iii['stack'] = data[i].stack
                    };
                  moreSeries.push(iii);
                }
                this.data = {
                    title: {
                        top: 10,
                        left: 20,
                        text: e.title,
                        textStyle: {
                            color: '#3a3f63',
                            'font-weight': '500',
                            'font-size': '18px',
                            'position': 'fixed'
                        }
                    },

                    tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                        type: 'none',
                        crossStyle: {
                          color: '#999'
                        },
                      }
                    },
                    legend: {
                      bottom:20,
                      data: legends
                    },
                    xAxis: {
                        data: dataAxis,
                        type: 'category',
                        axisTick: {
                          alignWithLabel: true
                        }
                    },
                    yAxis: [{
                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999',
                            }
                        }
                    },e.yAxis != null? e.yAxis:''],
                    /* dataZoom: [{
                        type: 'inside'
                    }], */
                    series: moreSeries
                };
                let _this = this;
                _this.chart.setOption(this.data,true);
                // _this.timer = setInterval(function() {
                //     _this.chart.setOption({}, true);
                //     _this.chart.setOption(_this.data, true);
                // }, 10000);


                // 监听点击事件
                var zoomSize = 6;
                _this.chart.on('click', function(params) {
                    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                    _this.chart.dispatchAction({
                        type: 'dataZoom',
                        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                    });
                });
            }
        }
    }
</script>
